<route lang="json5">
	{
	needLogin: true,
	style: {
	navigationStyle: 'custom',
	navigationBarTitleText: '班级管理',
	},
	}
</route>

<template>
	<view class="class">
		<!-- 顶部导航栏 -->
		<wd-navbar safeAreaInsetTop left-arrow title="班级管理" @click-left="handleClickLeft"></wd-navbar>
		<!-- 全选/反选 -->
		<view class="bg-[#fff] operate-btns">
			<wd-button size="small" type="text" @click="handleReverse" :disabled="btnDisabled">
				反选
			</wd-button>
			<wd-button size="small" @click="handleCheckAll" :disabled="btnDisabled">全选</wd-button>
		</view>
		<!-- 折叠面板 -->
		<view class="list">
			<view v-for="(item, index) in state.list" :key="index" class="item">
				<wd-checkbox v-model="item.checked" :disabled="item.disabled || item.isAllocate"
					class="text-[#3D3D3D] fw-700 text-24rpx">
					{{ item.className }}
				</wd-checkbox>
			</view>
		</view>
		<!-- 确认分配/确认删除 -->
		<wd-button type="primary" size="small" class="confirm-btn" @click="handleConfirm"
			:disabled="btnDisabled || isAllocateDisabled">
			{{ state.page === 'class' ? '确认分配' : '确认删除' }}
		</wd-button>
	</view>
</template>

<script setup lang="ts">
	import { useUserStore } from '@/store'
	/* 引入 接口 */
	import { getClassesApi, assignClassesApi } from '@/service/edu/class'
	import { useMessage } from 'wot-design-uni'
	const message = useMessage()

	/* 定义数据 */
	const state = reactive({
		page: '', // 从哪进入
		collapseValue: [],
		list: [],
		courseId: '',
		status: '', // 课程状态
	})

	/* 如果课程已发布，那么按钮全部禁用 */
	const btnDisabled = computed(() => {
		return `${state.status}` === '1'
	})

	/* 课程列表中的isAllocate如果全为true，禁用分配按钮 */
	const isAllocateDisabled = computed(() => {
		return state.list.every((e) => e.isAllocate)
	})

	/* 顶部导航栏 - 返回 */
	function handleClickLeft() {
		uni.navigateBack()
	}

	/* 获取数据 */
	const userStore = useUserStore()
	async function getListData() {
		try {
			const res : any = await getClassesApi({
				teacherId: userStore.userInfo.userId,
				courseId: state.courseId,
			})

			if (res.code === 200) {
				state.list = res.rows?.length > 0 ? res.rows.map((e : any) => ({ ...e, checked: false })) : []
				state.list.forEach((e) => {
					if (`${state.status}` === '1') {
						e.disabled = true
					}
					if (e.isAllocate) {
						e.checked = true
					}
				})
			}
		} catch (error) {
			// 在这里处理可能的错误情况
			console.error('获取数据时发生错误:', error)
		}
	}

	/* 全选 */
	function handleCheckAll() {
		state.list.forEach((e) => {
			e.checked = true
		})
	}

	/* 反选 */
	function handleReverse() {
		state.list.forEach((e) => {
			if (!e.isAllocate) {
				e.checked = !e.checked
			}
		})
	}

	/* 确认分配 */
	function handleConfirm() {
		const title = state.page === 'class' ? '确认分配' : '确认删除'
		const content = state.page === 'class' ? '确认对选择的班级进行分配此课程吗？' : ''
		/* 所选班级 */
		const classIds = state.list.filter((e) => e.checked).map((e) => e.classId)
		if (classIds.length === 0) {
			uni.showToast({
				title: '请选择需要分配的班级~',
				icon: 'none',
			})
			return // 若没有所选班级，返回并不执行下面的代码
		}
		// uni.showModal({
		// 	title,
		// 	content,
		// 	confirmText: '确认',
		// 	success: function (res) {
		// 		if (res.confirm) {
		// 			console.log('用户点击确定')
		// 			assignClassesApi({
		// 				courseId: state.courseId,
		// 				classIds,
		// 			}).then((data) => {
		// 				if (data.code === 200) {
		// 					uni.showToast({
		// 						title: state.page === 'class' ? '分配成功' : '删除成功',
		// 						icon: 'success',
		// 					})
		// 					setTimeout(() => {
		// 						uni.navigateBack()
		// 					}, 500)
		// 				}
		// 			})
		// 		} else if (res.cancel) {
		// 			console.log('用户点击取消')
		// 		}
		// 	},
		// })
		message
			.confirm({
				msg: content,
				title: title
			})
			.then(() => {
				assignClassesApi({
					courseId: state.courseId,
					classIds,
				}).then((data) => {
					if (data.code === 200) {
						uni.showToast({
							title: state.page === 'class' ? '分配成功' : '删除成功',
							icon: 'success',
						})
						setTimeout(() => {
							uni.navigateBack()
						}, 500)
					}
				})
			})
			.catch(() => {
				console.log('点击了取消按钮')
			})

	}

	onLoad(async (query) => {
		state.page = query.page
		state.courseId = query.courseId
		state.status = query.status
		await getListData()
	})
</script>

<style lang="scss" scoped>
	.class {
		height: 100vh;
		background: #f2f2f6;
	}

	:deep(.wd-collapse) {
		padding: 0 20rpx;
	}

	:deep(.wd-collapse-item__title) {
		font-size: 24rpx;
		font-weight: 700;
		color: #3d3d3d;
	}

	.list {
		display: grid;
		grid-template-rows: 1fr;
		grid-template-columns: 1fr;
		gap: 20rpx 0;
		padding: 20rpx;

		.item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 100rpx;
			padding: 0 20rpx;
			background-color: #fff;
			border-radius: 12rpx;
		}
	}

	:deep(.wd-img) {
		.wd-img__image {
			border-radius: 100%;
		}
	}

	:deep(.wd-navbar)::after {
		display: none !important;
	}

	/* 全选反选 */
	.operate-btns {
		display: flex;
		justify-content: space-between;
		padding: 20rpx;

		.wd-button {
			width: 100rpx;
			margin: 0;
			border-radius: 12rpx;
		}

		.wd-button:nth-child(1) {
			color: #b2b5bd;
		}
	}

	:deep(.wd-checkbox__shape) {
		width: 36rpx;
		height: 36rpx;
		border: solid 1rpx #b2b5bd;
	}

	.confirm-btn {
		position: fixed;
		bottom: 30rpx;
		left: 50%;
		width: 84%;
		height: 80rpx !important;
		background: linear-gradient(90deg, #20a4ff 2%, #0d53ff 100%) !important;
		transform: translateX(-50%);
	}

	:deep(.uni-modal) {
		border-radius: 20rpx;
	}
</style>